@use "sass:color";

/* 更新后的色彩方案 - 更加鲜明 */
$primary-color: #2980b9; /* 更深的蓝色 */
$secondary-color: #27ae60; /* 更深的绿色 */
$accent-color: #c0392b; /* 更深的红色 */
$background-color: #f5f7fa; /* 更亮的背景色 */

/* 导航栏样式 */
$header-bg-color: $primary-color; /* 使用主色调 */
$text-color: #2c3e50; /* 文本颜色：深蓝灰色 */
$text-color-reverse: #fff; /* 反色文本：白色 */
$background-color: #ecf0f1; /* 背景色：浅灰色 */

/* 更大的组件尺寸 */
$header-height: 80px; /* 进一步增加头部高度 */
$section-width: 98%; /* 进一步增加内容区宽度 */

body {
  min-width: 1600px; /* 增加最小宽度 */
  font-size: 18px; /* 增大基本字体大小 */
}

input[type='text'], input[type='password'], input[type='email'], input[type='number'], textarea {
  padding: 16px; /* 进一步增大内边距 */
  font-size: 18px; /* 增大字体 */
}

button {
  padding: 14px 24px; /* 进一步增大按钮内边距 */
  font-size: 18px; /* 增大字体 */
}

.container header {
  .title {
    font-size: 28px; /* 增大标题字体 */
  }
  
  ul li a {
    font-size: 22px; /* 增大导航字体 */
  }
}

.topics .title {
  font-size: 24px; /* 增大主题标题字体 */
}

body {
  margin: 0 auto;
  width: 100%;
  min-width: 1400px;
  overflow-x: hidden;
  background-color: $background-color; /* 添加背景色 */
  font-size: 16px; /* 增大基本字体大小 */
  line-height: 1.6; /* 增加行高 */
}

* {
  color: $text-color;
  word-break: break-word;
  word-wrap: break-word;
}

a {
  color: $primary-color; /* 链接使用主色调 */
  text-decoration: none; /* 移除下划线 */
  transition: color 0.3s ease; /* 添加过渡效果 */

  &:visited {
    color: color.adjust($primary-color, $lightness: -10%); /* 访问过的链接颜色稍深 */
  }
  
  &:hover, &:focus {
    color: color.adjust($primary-color, $lightness: 10%); /* 悬停时颜色稍浅 */
    text-decoration: underline; /* 悬停时添加下划线 */
  }
}

/* 表单元素样式 */
input[type='text'], input[type='password'], input[type='email'], input[type='number'], button, textarea {
  border: 1px solid color.adjust($text-color, $lightness: 40%);
  border-radius: 4px; /* 圆角边框 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  transition: all 0.3s ease; /* 添加过渡效果 */
}

input[type='text'], input[type='password'], input[type='email'], input[type='number'], textarea {
  width: calc(100% - 24px); /* 增加内边距空间 */
  padding: 12px; /* 增大内边距 */
  font-size: 16px; /* 增大字体 */
  resize: none;

  &:focus {
    outline: 0;
    border-color: $primary-color; /* 聚焦时边框使用主色调 */
    box-shadow: 0 0 5px rgba($primary-color, 0.5); /* 聚焦时增强阴影 */
  }
}

//textarea {
//  width: $section-width - 14px;
//  resize: none;
//}

button {
  padding: 10px 20px; /* 增大按钮内边距 */
  background-color: $primary-color; /* 按钮背景使用主色调 */
  color: $text-color-reverse; /* 按钮文字使用反色 */
  border: none; /* 移除边框 */
  font-size: 16px; /* 增大字体 */
  cursor: pointer; /* 鼠标指针 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */

  &:hover {
    background-color: color.adjust($primary-color, $lightness: -10%); /* 悬停时背景色加深 */
  }

  &:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba($primary-color, 0.3); /* 聚焦时添加轮廓阴影 */
  }
}

ol, ul {
  margin-left: 0;
  padding-left: 25px;
  li {
    line-height: 1.7em;
  }
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.clear {
  clear: both;
}

.container {
  header {
    padding: 0 20px;
    background-color: $header-bg-color;
    width: 100%;
    height: $header-height;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    position: relative; /* 为阴影效果添加定位 */
    z-index: 100; /* 确保导航在其他元素上方 */

    .title {
      font-size: 24px; /* 增大标题字体 */
      font-weight: 700; /* 加粗标题 */
      letter-spacing: 1px; /* 增加字母间距 */
      text-transform: uppercase; /* 大写转换 */
    }

    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      display: inline-block;

      li {
        float: left;
        padding: 0 20px; /* 增加水平内边距 */
        line-height: $header-height;
        transition: background-color 0.3s ease; /* 添加过渡效果 */

        a {
          color: $text-color-reverse;
          text-decoration: none;
          font-size: 20px; /* 增大导航字体 */
          font-weight: 500; /* 稍微加粗 */
          display: block; /* 使整个区域可点击 */
          transition: color 0.3s ease; /* 添加过渡效果 */
          
          &:hover {
            text-decoration: none; /* 移除悬停时的下划线 */
            color: #ecf0f1;
          }
          
          i {
            margin-right: 5px;
          }
        }

        &:hover {
          background-color: rgba($text-color-reverse, 0.1); /* 悬停时添加半透明背景 */
        }

        &.active {
          background-color: $secondary-color; /* 活动项使用次要色调 */
          border-bottom: 3px solid $secondary-color;

          a {
            color: $text-color-reverse; /* 保持文字为白色 */
          }
        }
        
        .search-form {
          display: flex;
          align-items: center;
          input[type="search"] {
            padding: 8px 12px;
            border-radius: 20px 0 0 20px;
            border: none;
            outline: none;
            width: 200px;
            background-color: rgba(255, 255, 255, 0.2);
            color: #fff;
            &::placeholder {
              color: rgba(255, 255, 255, 0.7);
            }
          }
          button {
            background-color: rgba(255, 255, 255, 0.2);
            border: none;
            padding: 8px 12px;
            border-radius: 0 20px 20px 0;
            color: #fff;
            cursor: pointer;
            &:hover {
              background-color: rgba(255, 255, 255, 0.3);
            }
          }
        }
      }

      li:first-child {
        padding-left: 20px; /* 增加左侧内边距 */
      }
    }

    ul:last-child {
      float: right;

      li:first-child {
        padding-left: 15px; /* 增加左侧内边距 */
      }

      li:last-child {
        padding-right: 20px; /* 增加右侧内边距 */
      }
    }

    #notReadCount {
      color: $text-color-reverse;
      background-color: $accent-color; /* 使用强调色 */
      padding: 2px 8px; /* 增加内边距 */
      border-radius: 10px; /* 圆角 */
      font-size: 14px; /* 调整字体大小 */
      font-weight: bold; /* 加粗 */
      display: none;
      margin-left: 5px; /* 添加左边距 */
    }
  }

  section {
    margin: 0 auto;
    width: $section-width;
    padding: 30px 0; /* 增加上下内边距 */

    .box {
      margin: 0 auto 30px; /* 增加底部外边距 */
      border: none; /* 移除边框 */
      border-radius: 8px; /* 添加圆角 */
      background-color: $text-color-reverse; /* 白色背景 */
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加阴影 */
      overflow: hidden; /* 确保圆角生效 */
      transition: box-shadow 0.3s ease; /* 添加过渡效果 */
      
      &:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* 悬停时增强阴影 */
      }

      .box-heading {
        padding: 20px 25px; /* 增加内边距 */
        border-bottom: 1px solid rgba($text-color, 0.1); /* 淡化边框 */
        overflow: hidden;
        background-color: rgba($primary-color, 0.05); /* 添加淡色背景 */
        font-size: 18px; /* 增大字体 */
        font-weight: 500; /* 加粗 */
      }

      .box-footer {
        padding: 20px 25px; /* 增加内边距 */
        border-top: 1px solid rgba($text-color, 0.1); /* 淡化边框 */
        overflow: hidden;
        background-color: rgba($primary-color, 0.02); /* 添加淡色背景 */
      }

      .box-body {
        padding: 25px; /* 增加内边距 */
        overflow: hidden;
      }
    }

    .topics {
      border-radius: 8px; /* 添加圆角 */
      background-color: $text-color-reverse; /* 白色背景 */
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加阴影 */
      padding: 20px; /* 添加内边距 */
      margin-bottom: 30px; /* 添加底部外边距 */
      
      tr:hover {
        background-color: rgba($primary-color, 0.05); /* 悬停时添加背景色 */
      }
      
      .title {
        font-size: 22px; /* 增大字体 */
        text-decoration: none;
        font-weight: 500; /* 加粗 */
        color: $primary-color; /* 使用主色调 */
        transition: color 0.3s ease; /* 添加过渡效果 */
        
        &:hover {
          color: color.adjust($primary-color, $lightness: -10%); /* 悬停时颜色加深 */
        }
      }
      
      .divide {
        padding-bottom: 15px; /* 增加底部内边距 */
        border-bottom: 1px solid rgba($text-color, 0.1); /* 淡化边框 */
      }
      
      img {
        border-radius: 50%; /* 圆形头像 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
        width: 60px; /* 增大头像尺寸 */
        height: 60px; /* 增大头像尺寸 */
        object-fit: cover; /* 确保图片填充 */
      }
    }

    .title {
      font-size: 26px; /* 增大字体 */
      font-weight: 700; /* 加粗 */
      color: $text-color; /* 使用文本颜色 */
      margin-bottom: 15px; /* 添加底部外边距 */
    }

    .content {
      img {
        max-width: 100%;
        border-radius: 8px; /* 添加圆角 */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 增强阴影效果 */
        margin: 20px 0; /* 添加上下外边距 */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
        
        &:hover {
          transform: scale(1.02); /* 悬停时轻微放大 */
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* 悬停时增强阴影 */
        }
      }

      pre {
        padding: 20px; /* 增加内边距 */
        background-color: #f8f9fa; /* 更柔和的背景色 */
        border-radius: 8px; /* 添加圆角 */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* 添加阴影 */
        margin: 20px 0; /* 添加上下外边距 */
        border-left: 4px solid $primary-color; /* 添加左侧边框 */

        code {
          white-space: pre-wrap;
          font-size: 16px; /* 增大字体 */
          line-height: 1.6; /* 增加行高 */
          color: $text-color; /* 使用文本颜色 */
        }
      }
      
      table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid rgba($text-color, 0.1); /* 淡化边框 */
        border-radius: 8px; /* 添加圆角 */
        overflow: hidden; /* 确保圆角生效 */
        margin: 20px 0; /* 添加上下外边距 */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* 添加阴影 */
        
        th {
          background-color: rgba($primary-color, 0.1); /* 表头背景色 */
          color: $text-color; /* 表头文字颜色 */
          font-weight: 600; /* 加粗 */
          text-align: left; /* 左对齐 */
          padding: 15px; /* 增加内边距 */
          border: 1px solid rgba($text-color, 0.1); /* 淡化边框 */
        }
        
        td {
          border: 1px solid rgba($text-color, 0.1); /* 淡化边框 */
          padding: 12px 15px; /* 增加内边距 */
          vertical-align: top; /* 顶部对齐 */
        }
        
        tr:nth-child(even) {
          background-color: rgba($primary-color, 0.02); /* 偶数行背景色 */
        }
        
        tr:hover {
          background-color: rgba($primary-color, 0.05); /* 悬停时背景色 */
        }
      }

      .embed-responsive {
        position: relative;
        display: block;
        height: 0;
        padding: 0;
        overflow: hidden;

        .embed-responsive-item,
        iframe,
        embed,
        object,
        video {
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          height: 100%;
          width: 100%;
          border: 0;
        }
      }

      // Modifier class for 16:9 aspect ratio
      .embed-responsive-16by9 {
        padding-bottom: 56.25%;
      }
    }

    .tags {
      overflow: hidden;
      margin: 0 -15px; /* 负边距，用于抵消item的外边距 */
      
      .item {
        float: left;
        width: calc(25% - 30px); /* 考虑到外边距的宽度 */
        height: 120px; /* 增加高度 */
        overflow: hidden;
        margin: 0 15px 30px; /* 增加外边距 */
        padding: 20px; /* 添加内边距 */
        background-color: $text-color-reverse; /* 白色背景 */
        border-radius: 8px; /* 添加圆角 */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
        
        &:hover {
          transform: translateY(-5px); /* 悬停时上移 */
          box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* 悬停时增强阴影 */
        }

        .description {
          font-size: 15px; /* 增大字体 */
          margin-top: 15px; /* 增加上边距 */
          overflow: hidden;
          color: color.adjust($text-color, $lightness: 20%); /* 淡化文本颜色 */
          line-height: 1.5; /* 增加行高 */
        }
        
        a {
          font-weight: 600; /* 加粗链接 */
          font-size: 18px; /* 增大字体 */
        }
      }
    }

    /* 掘金风格配色 */
    $primary-color: #1e80ff; /* 掘金主色调 */
    $secondary-color: #86909c; /* 掘金次要色调 */
    $accent-color: #f53f3f; /* 掘金强调色 */
    $background-color: #f7f8fa; /* 掘金背景色 */
    
    /* 导航栏样式 */
    $header-bg-color: #fff; /* 白色导航栏 */
    $header-shadow: 0 1px 2px 0 rgba(0,0,0,.05); /* 掘金导航阴影 */
    
    /* 标签高亮效果 */
    .tag {
      transition: all 0.3s ease;
      &:hover {
        background-color: rgba(30, 128, 255, 0.1);
        color: $primary-color;
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }
    }

    .comments {
      background-color: $text-color-reverse; /* 白色背景 */
      border-radius: 8px; /* 添加圆角 */
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加阴影 */
      padding: 25px; /* 添加内边距 */
      margin-top: 30px; /* 添加上边距 */
      
      img {
        max-width: 100%;
        border-radius: 4px; /* 添加圆角 */
      }

      .fa {
        cursor: pointer;
        font-size: 18px; /* 增大图标 */
        color: $primary-color; /* 使用主色调 */
        transition: color 0.3s ease; /* 添加过渡效果 */
        
        &:hover {
          color: color.adjust($primary-color, $lightness: -10%); /* 悬停时颜色加深 */
        }
      }
    }
    .user {
      overflow: hidden;
      .left {
        float: left;
        width: 250px; /* 增加宽度 */
        padding: 25px; /* 添加内边距 */
        background-color: $text-color-reverse; /* 白色背景 */
        border-radius: 8px; /* 添加圆角 */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加阴影 */
      }
      .right {
        width: calc(95% - 315px); /* 调整宽度，使用calc()函数处理不同单位 */
        float: right;
        padding: 25px; /* 添加内边距 */
        background-color: $text-color-reverse; /* 白色背景 */
        border-radius: 8px; /* 添加圆角 */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加阴影 */
      }
      .menu {
        position: fixed;
        
        a {
          display: block; /* 块级显示 */
          padding: 12px 15px; /* 添加内边距 */
          margin-bottom: 10px; /* 添加底部外边距 */
          background-color: rgba($primary-color, 0.05); /* 添加背景色 */
          border-radius: 6px; /* 添加圆角 */
          transition: background-color 0.3s ease, color 0.3s ease; /* 添加过渡效果 */
          font-weight: 500; /* 加粗 */
          
          &:hover {
            background-color: $primary-color; /* 悬停时背景色 */
            color: $text-color-reverse; /* 悬停时文字颜色 */
            text-decoration: none; /* 移除下划线 */
          }
        }
      }
      .settings {
        p {
          margin-bottom: 10px; /* 增加底部外边距 */
          font-size: 16px; /* 增大字体 */
        }
        button {
          margin-top: 20px; /* 增加上边距 */
        }
        
        label {
          display: block; /* 块级显示 */
          margin-bottom: 8px; /* 添加底部外边距 */
          font-weight: 500; /* 加粗 */
          font-size: 16px; /* 增大字体 */
        }
      }
    }
  }

  footer {
    padding: 30px 20px;
    background-color: #3498db;
    text-align: center;
    font-size: 14px;
    color: #fff;
    margin-top: 30px;
    border-radius: 5px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    
    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .footer-links {
      display: flex;
      justify-content: center;
      gap: 30px;
      
      a {
        color: #fff;
        text-decoration: none;
        transition: all 0.3s ease;
        
        i {
          margin-right: 5px;
        }
        
        &:hover {
          color: #ecf0f1;
          transform: translateY(-2px);
        }
      }
    }
  }
}
